<template>
  <section class="mm-wrap">
    <h2 class="title">病例与用药</h2>
    <div class="underline"></div>

    <div class="pc-layout">
      <PersonalSidebar />
      <el-card class="mm-card">
        <div class="mm-head">
          <h3>病历与用药</h3>
        </div>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-card shadow="never" class="inner-card">
              <template #header>
                <div class="card-header">近期诊断</div>
              </template>
              <ul class="diag-list">
                <li>高血压（轻度） - 2023-09-12</li>
                <li>糖尿病（Ⅱ型） - 2023-07-08</li>
                <li>骨关节炎 - 2023-06-20</li>
              </ul>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="never" class="inner-card">
              <template #header>
                <div class="card-header">护理建议</div>
              </template>
              <ul class="diag-list">
                <li>保持低盐低糖清淡饮食</li>
                <li>每日监测血压和血糖</li>
                <li>适度散步与关节活动训练</li>
              </ul>
            </el-card>
          </el-col>
        </el-row>

        <div class="table-head">
          <h4>当前用药</h4>
        </div>
        <el-table :data="medications" border>
          <el-table-column prop="name" label="药品名称" width="180" />
          <el-table-column prop="dosage" label="剂量" width="120" />
          <el-table-column prop="frequency" label="频次" width="120" />
          <el-table-column prop="start" label="开始日期" width="140" />
          <el-table-column prop="end" label="结束日期" width="140" />
          <el-table-column prop="note" label="备注" />
        </el-table>
      </el-card>
    </div>
  </section>
</template>

<script setup>
import PersonalSidebar from '@/components/PersonalSidebar.vue'
const medications = [
  { name: '盐酸贝那普利片', dosage: '10mg', frequency: 'QD', start: '2023-09-13', end: '-', note: '清晨服用' },
  { name: '二甲双胍片', dosage: '500mg', frequency: 'BID', start: '2023-07-09', end: '-', note: '饭后服用' },
  { name: '葡萄糖酸钙片', dosage: '600mg', frequency: 'QD', start: '2023-06-21', end: '2023-10-21', note: '补钙' },
]
</script>

<style scoped>
.mm-wrap { padding: 32px 20px; }
.title { text-align: center; font-weight: 800; font-size: 24px; color: #222; }
.underline { width: 80px; height: 4px; background: #4a7b26; border-radius: 2px; margin: 10px auto 24px; }
.pc-layout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
.mm-card { }
.mm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.inner-card { margin-bottom: 12px; }
.card-header { font-weight: 600; }
.diag-list { padding-left: 16px; line-height: 28px; }
.table-head { margin: 12px 0; }
@media (max-width: 900px) { .pc-layout { grid-template-columns: 1fr; } }
</style>